<template>
    <div id="kline_2" style="width: 100%; height: 100%; padding-top: 15px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { chargeData } from "@/api/msg"
export default {
    data(){
        return {
            option: {
                colorBy: "series",
                color: ["#5B8FF9", "#69DBAE", "#5070dd", "#b6d634", "#505372", "#ff994d", "#0ca8df", "#ffd10a", "#fb628b", "#785db0", "#3fbe95" ],
                legend: {
                    data: ['充值金额', '消费金额']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisPointer: {
                            type: 'shadow',
                        },
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    },
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '充值金额',
                        type: 'bar',
                        data: [],
                        barWidth: 15,
                    },
                    {
                        name: '消费金额',
                        type: 'bar',
                        data: [],
                        barWidth: 15,
                    },
                ]
            },
            
        }
    },
    methods: {
        initCharts(){
            chargeData({}).then(res=>{
                let data = res.dateList.slice(0,7).map(function(element) {
                    return element.slice(5,10);
                });
                this.option.xAxis = [{
                    type: 'category',
                    boundaryGap: true,
                    data: data
                }]
                this.option.series = [
                    {
                        name: '充值金额',
                        type: 'bar',
                        data: res.rechargeMoneyList.slice(0,7),
                        barWidth: 20
                    },
                    {
                        name: '消费金额',
                        type: 'bar',
                        data: res.balanceConsumptionList.slice(0,7),
                        barWidth: 20
                    },
                ]
                var chartDom = document.getElementById('kline_2');
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option)
            }) 
        }
    }
}
</script>

<style lang="scss">
   
</style>